<template>
  <view class="page">
    <Head
      title="兑换记录"
      @leftClick="leftClick"
    >
    </Head>
    <view class="list">
      <view class="title">
        <u-tabs
          :list="choselist"
          :is-scroll="false"
          active-color="$price"
          :current="current"
          height="100"
          @change="changeCurrent"
        ></u-tabs>
      </view>
      <uni-transition
        :mode-class="['fade', 'zoom-in']"
        :show="true"
        class="item"
        v-for="item in list"
        :key="item.id"
      >
        <view class="amount-result">
          <text>
            <text :class="current === 0 ? 'amount' : 'un-amount'">{{ item.amount || "" }}</text>
          </text>
          <text class="range-mode">{{ rechargeMode }}</text>
        </view>
        <view class="date">
          {{ item.createTime }}
        </view>
      </uni-transition>
    </view>

    <EmptyStatus
      emptyWord="暂无提现记录哦"
      v-if="list.length == 0"
    ></EmptyStatus>
  </view>
</template>

<script>
import { transferRecordAPI } from "@/api/my.js";
import { userInfoAPI } from "@/api/login.js";
import Head from "@/components/Head/index";
import EmptyStatus from "../../components/emptyStatus/index.vue";
import xtCountTo from "@/components/xt-count-to/xt-count-to.vue";
export default {
  components: {
    Head,
    EmptyStatus,
    xtCountTo,
  },
  data() {
    return {
      choselist: [
        {
          id: "提现待审核",
          name: "提现待审核",
        },
        {
          id: "提现成功",
          name: "提现成功",
        },
        {
          id: "提现失败",
          name: "提现失败",
        },
      ],

      list: [
        {
          number: 100,
        },
      ],

      current: 0,
      pageSize: 10,
      rechargeMode: "提现待审核",
      userobj: {},
      totalWithdrawal: {},
      totalWithdrawal: "",
    };
  },
  computed: {
    numArr() {
      const str = String(this.totalWithdrawal);
      let arr = [];

      for (let i = 0; i < str.length; i++) {
        arr.push(parseInt(str[i]));
      }

      return arr;
    },
  },

  filters: {},
  created() {
    this.getUserInfo();
  },
  onLoad(option) {
    this.getData();
  },
  methods: {
    leftClick() {
      console.log("发送处理事件");
      uni.$emit("handleBack");
    },
    changeCurrent(current) {
      this.current = current;
      if (this.current == 1) {
        this.rechargeMode = "提现成功";
        this.getData();
      } else if (this.current == 2) {
        this.rechargeMode = "提现失败";
        this.getData();
      } else {
        this.rechargeMode = "提现待审核";
        this.getData();
      }
    },
    /**
     * 获取用户信息
     */
    getUserInfo() {
      userInfoAPI().then((res) => {
        this.userobj = res;
      });
    },

    /**
     * 获取兑换记录
     * 状态:
     *    1.待审核
     *    2.提现成功
     *    3.提现失败
     */
    getData() {
      let data = {
        type: 1,
        detailed: this.rechargeMode,
      };
      this.list = [];
      transferRecordAPI(data).then((res) => {
        console.log("%c [ res ]-184", "font-size:13px; background:#333333; color:#f3f3f3;", res);
        this.list = res.data.records;
      });
    },
    choseChange(item) {
      this.rechargeMode = item.id;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f6f6f6;
  width: 750rpx;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: calc(88rpx + var(--status-bar-height));

  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  // 覆盖背景颜色
  ::v-deep .head {
    background-color: #f6f6f6 !important;
  }

  .cumulative-withdrawal {
    margin-top: 60rpx;
    width: 699rpx;
    height: 220rpx;
    position: relative;
    box-sizing: border-box;
    padding: 36rpx;
    padding-bottom: 62rpx;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;

    image {
      width: 699rpx;
      height: 220rpx;

      position: absolute;
      top: 0;
      left: 0;

      z-index: 1;
    }

    .label {
      font-size: 24rpx;
      height: 24rpx;
      line-height: 24rpx;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
      font-weight: 500;
      color: #ffffff;

      z-index: 2;
    }

    .num {
      width: 100%;
      height: 62rpx;
      font-size: 62rpx;
      line-height: 62rpx;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
      font-weight: 800;
      color: #ffffff;

      z-index: 2;

      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;

      li {
        list-style: none;
        height: 62rpx;
        font-size: 62rpx;
        line-height: 62rpx;
        font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
        font-weight: 800;
        color: #ffffff;
      }
    }
  }

  .list {
    width: 750rpx;
    background-color: #ffffff;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    margin-top: 40rpx;
    overflow: hidden;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;

    .title {
      width: 100%;
      height: 100rpx;
    }

    .item {
      width: 750rpx;
      min-height: 150rpx;
      border-bottom: 1rpx solid #f1f1f1;

      box-sizing: border-box;
      padding: 24rpx 0;

      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      align-items: flex-start;

      .amount-result {
        box-sizing: border-box;
        padding: 0 24rpx;

        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #999999;
        .amount {
          color: #333333;
          margin-right: 10rpx;
          font-size: 32rpx;
        }

        .un-amount {
          color: #ed7900;
          margin-right: 10rpx;
          font-size: 32rpx;
        }

        .range-mode {
          color: #333333;
          font-size: 28rpx;
          font-weight: 800;
        }
      }

      .date {
        font-size: 24rpx;
        font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
        font-weight: 500;
        color: #999999;
        box-sizing: border-box;
        padding: 0 24rpx;
      }
    }
  }
}
</style>
